<template>
  <div id="role" />
</template>

<script>

export default {
  name: 'Role',
  props: {
    dataList: {
      type: Array,
      default: () => { return [] }
    }
  },
  mounted() {
    setTimeout(() => {
      this.drawChart()
    }, 1000)
  },
  methods: {
    drawChart() {
      // 基于准备好的dom，初始化echarts实例  这个和上面的main对应
      const myChart = this.$echarts.init(document.getElementById('role'))
      // 指定图表的配置项和数据
      const option = {
        title: {
          text: '角色分布',
          left: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{b} : {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          x: 'left',
          data: this.dataList.map(item => item.name)
        },
        toolbox: {
          show: true,
          feature: {
            mark: { show: true },
            magicType: {
              show: true,
              type: ['pie', 'funnel'],
              option: {
                funnel: {
                  x: '25%',
                  width: '50%',
                  funnelAlign: 'left',
                  max: 1548
                }
              }
            }
          }
        },
        calculable: true,
        series: [
          {
            type: 'pie',
            radius: '55%',
            center: ['50%', '40%'],
            data: this.dataList
          }
        ]
      }
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option)
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
